﻿@page
@{ Layout = "_LayoutHome"; }
@section Styles{
  <style>
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .el-icon-picture-outline {
      font-size: 22px;
      margin: 80px 0;
      color: #c0c4cc;
    }
  </style>
}

<el-row>
  <el-form :inline="true" :model="formInline" size="mini">
    <el-form-item label="搜索">
      <el-input v-model="formInline.keyword" placeholder="关键字"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" v-on:click="btnSearchClick">查询</el-button>
    </el-form-item>
  </el-form>
</el-row>

<el-row :gutter="10">
  <el-col :span="6" v-for="image in images" :key="image.imageUrl">
    <el-image
      style="width: 100%; min-height: 220px; max-height: 220px; margin-bottom: 15px; cursor: pointer"
      :src="image.imageUrl"
      v-on:click="btnImageClick(image)"
    >
      <template slot="error">
        <div class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </template>
      <template slot="placeholder">
        <el-skeleton style="width: 100%" :loading="true" animated>
          <template slot="template">
            <el-skeleton-item variant="image" style="width: 100%; height: 180px" />
          </template>
        </el-skeleton>
      </template>
    </el-image>
  </el-col>
</el-row>

<div v-if="isMore()" style="text-align: center">
  <el-button size="medium" type="primary" style="width: 100%" v-on:click="btnMoreClick">
    加载更多...
  </el-button>
</div>

@section Scripts{
  <script src="/sitefiles/assets/js/home/common/formLayerImageSelect.js" type="text/javascript"></script>
}